import React, { Component } from 'react';
import { Grid, Input, DatePicker, Select } from '@alifd/next';
import IceContainer from '@icedesign/container';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import PageHead from '../../../../components/PageHeadStockExcelAdd';
import service from '../../../../utils/service';
import api from '../../../../utils/api';

const { Row, Col } = Grid;

export default class chooseHead extends Component {
  static displayName = 'Overview';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      purInDefaultvalue: {
        u_id: sessionStorage.getItem('id'), // 操作员ID
        w_id: sessionStorage.getItem('w_id'), // 仓库ID
        add_time: '', // 入库日期
        s_id: '',
        s_name: '',
      },
      SupperDataList: [],

    };
  }
   // 获取供应商列表
   getSupperInfo= () => {
     service({
       method: 'get',
       url: api.GetSuperList,
     })
       .then((res) => {
         const data = res.data.list;
         const NewSList = [];
         data.forEach((item) => {
           NewSList.push({ label: item.name, value: item.id.toString() });
         });
         NewSList.sort((item1, item2) => {
           return item1.label.localeCompare(item2.label, 'cn');
         });
         this.setState(
           {
             SupperDataList: NewSList,
           }
         );
         // console.log(this.state.placeArr);
       });
   }
  formChange = (value) => {

    const SupperDataList = this.state.SupperDataList;
    if (value.add_time) {
      value.add_time = new Date(value.add_time).toLocaleDateString();
    }
    if (value.s_id) {
      SupperDataList.forEach((item) => {
        if (item.value == value.s_id) {
          // console.log(3);
          value.s_name = item.label;
        }
      });
    }
    this.setState(
      {
        purInDefaultvalue: value,
      }, () => {
        this.props.formPurInChange(value);
      }
    );
  };
  componentDidMount() {
    this.getSupperInfo();
  }
  render() {
    return (
      <div style={styles.overview}>
        <PageHead title="入库信息" />
        <IceFormBinderWrapper style={styles.alignRight}
          value={this.state.purInDefaultvalue}
          onChange={this.formChange}
          ref="formPurIn"
        >
          <IceContainer>
            <Row style={styles.row} gutter="4">
              <Col style={styles.col} span="6">
                <span style={styles.SelectLabel}>仓库</span>
                <Input
                  readOnly
                  value={sessionStorage.getItem('w_name')}
                  style={styles.Select}
                  size="large"
                />
              </Col>
              <Col span="6">
                <p style={styles.SelectLabel}>操作员</p>
                <Input
                  value={sessionStorage.getItem('uname')}
                  style={styles.Select}
                  size="large"
                  readOnly
                />
              </Col>
              <Col span="6">
                <span style={styles.SelectLabel}>供应商</span>
                <IceFormBinder name="s_id">
                  <Select
                    placeholder="请选择供应商"
                    size="large"
                    autoWidth
                    dataSource={this.state.SupperDataList}
                    style={styles.Select}
                  />
                </IceFormBinder>
              </Col>
              <Col span="6">
                <p style={styles.SelectLabel}>入库日期</p>
                <IceFormBinder name="add_time">
                  <DatePicker format="YYYY-MM-DD" style={styles.Select.DatePicker} size="large" />
                </IceFormBinder>
              </Col>
            </Row>
          </IceContainer>
        </IceFormBinderWrapper>
      </div>
    );
  }
}

const styles = {
  overview: {
    h3: {
      fontSize: '20px',
      textAlign: 'left',
      lineHeight: '30px',
      fontFamily: 'SourceHanSans-Medium',
      color: '#333333',
      marginBottom: '20px',
    },
  },
  alignRight: {
    textAlign: 'right',
  },
  container: {
    padding: '0',
  },
  alignLeft: {
    float: 'left',
  },
  Select: {
    float: 'left',
    width: 'calc(100% - 100px)',
    height: '38px',
    maxWidth: '300px',
    DatePicker: {
      width: 'calc(100% - 100px)',
      minWidth: '130px',
      float: 'left',
      maxWidth: '300px',
    },
  },
  SelectLabel: {
    fontSize: '14px',
    lineHeight: '40px',
    float: 'left',
    margin: '0 10px 0 0',
    padding: '0',
    color: '#666',
    textAlign: 'right',
    minWidth: '60px',
  },
  Search: {
    float: 'left',
  },
  // row: {
  //   marginBottom: '20px',
  // },
  input: {
    float: 'left',
  },
};
